<template>
	<scroll-view class="container" scroll-y>
		<!-- 滚动视图 -->
		<view class="section">
			<swiper class="swiper-box" :autoplay="true" :interval="3000" indicator-dots circular>
				<swiper-item>
					<image class="swiper-img" src='/static/city1.png' mode="aspectFill" />
				</swiper-item>
				<swiper-item>
					<image class="swiper-img" src='/static/city2.jpg' mode="aspectFill" />
				</swiper-item>
				<swiper-item>
					<image class="swiper-img" src='/static/city3.jpg' mode="aspectFill" />
				</swiper-item>
			</swiper>
			<!-- 介绍 -->
		</view>
		<view class="section">
			<view class="section-title">城市介绍</view>
			<view> <rich-text :nodes="j"></rich-text></view>
		</view>
		<!-- 探索进度 -->
		<view class="section">
			<view class="section-title">探索进度</view>
			<view class="progress-container">
				<text>已完成 {{ jindu }}%</text>
				<progress :percent="jindu" stroke-width="10" active-color="#ff55ff" show-info />
			</view>
		</view>
		<!-- 城市选择 -->
		<view class="section">
			<view class="section-title">目标城市</view>
			<picker mode="region" @change="City" :value="select">
				<view class="picker">当前选择：{{ select.join(' - ') }}</view>
			</picker>
		</view>
		<!-- 偏好设置 -->
		<view class="section">
			<view class="section-title">偏好设置</view>
			<view class="preference-item">
				<text class="preference-label">出行方式：</text>
				<radio-group @change="onTransportChange">
					<label class="radio-label">
						<radio value="bus" checked="true" />公交
					</label>
					<label class="radio-label">
						<radio value="car" />自驾
					</label>
					<label class="radio-label">
						<radio value="walk" />步行
					</label>
				</radio-group>
			</view>
			<!-- 显示推荐景点 -->
			<view class="preference-item">
				<text class="preference-label">显示推荐景点</text>
				<switch :checked="show" @change="onRadiusChange" color="#ffaaff" />
			</view>
			<!-- 探索半径 -->
			<view class="preference-item">
				<view class="slider-header">
					<text class="preference-label">探索半径</text>
					<text>{{ explorationRadius }} km</text>
				</view>
				<slider :value="ex" min="1" max="20" @change="onRadiusChange" active-color="#ffaaff" show-value />
			</view>

		</view>

		<!-- 媒体展示 -->
		<view class="section">
			<view class="section-title">宣传视频</view>
			<video class="video-player" src='/static/city-video.mp4' controls show-play-btn></video>
		</view>

	
		
	    
	    
		
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				j: '泉州，古称刺桐城，宋元时期的“东方第一大港”。这里山海交融，古迹遍布，闽南红砖古厝与千年海丝文化交织，是一座充满烟火气的“半城烟火半城仙”的宝藏古城。',
				jindu: 72,
				select: ['福建省', '泉州市', '丰泽区'],
				show: false,
				ex: 10,

			}


		},
		methods: {

		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background-color: #ffffff;
	}

	.section {
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	.swiper-box {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.rich-text-content {
		font-size: 32rpx;
		line-height: 1.6;
	}

	.progress-container {
		width: 100%;
	}

	.picker {
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		font-size: 32rpx;
	}

	.preference-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.preference-label {
		font-size: 32rpx;
		color: #333;
	}

	.radio-label {
		margin-right: 30rpx;
		font-size: 30rpx;
	}

	.slider-header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.video-player {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
	}
</style>